<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:fn="http://java.sun.com/jsp/jstl/functions"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:p="http://primefaces.org/ui"
	xmlns:sigecComp="http://java.sun.com/jsf/composite/components">

	<h:outputStylesheet library="css" name="textos.css" />    
   	<h:outputStylesheet library="css" name="bordes.css"/>
   	<h:outputStylesheet library="css" name="botones.css"/>
   	<h:outputScript library="js" name="validaciones.js" target="head"/>
   	
   	<h:outputStylesheet>
   		.alinearLeft{
   			text-align:left;
   			font-weight: bold;
   		}
   		.alinearCenter{
   			text-align:center;
   			font-weight: bold;
   		}
   		
   		
   	</h:outputStylesheet>
   	
	<h:form id="frmContactos">
		<rich:panel header="#{msg['etiqueta_lista_contactos']}">
			
			
				<h:panelGroup layout="block" id="pgTableContainer">
					<h:commandLink>
			            <h:graphicImage library="images/button" name="ms-excel.png" style="border:0px;"/>  
			            <p:dataExporter type="xls" target="tblContactos" fileName="contactos" excludeColumns="0"/>  
			        </h:commandLink>
			        
			        <p:panel id="scriptPnl">
			        <script type="text/javascript">
				        (function($) {
				            $.fn.hasScrollBar = function() {
				                return this.get(0).scrollHeight > this.height();
				            }
				        })(jQuery);
				        
			        	$(function(){
				        	$('.ui-datatable-scrollable-header').children().css({'width':$('.ui-datatable-scrollable-body').width()-18});
				        });
			        	
			        </script>
			        </p:panel>
					<p:dataTable id="tblContactos" value="#{listadoContactosController.lstPersonas}" rowIndexVar="numRow" paginatorPosition="top" 
						var="contacto" rows="15" paginator="true" style="width:100%;" scrollHeight="400" scrollable="true" >
						<p:ajax event="page" process="@none" update=":frmContactos:scriptPnl"/>
						<p:column style="text-align:center; width:80px" >
							<f:facet name="header">
								<h:outputLabel value="#{msg.numero}" />
							</f:facet>
							<a4j:commandLink value="#{numRow+1}" 
								execute="@this" oncomplete="#{rich:component('detailContact')}.show()" render="detailContact">
								<f:setPropertyActionListener target="#{listadoContactosController.personaSelected}" value="#{contacto}" />
								<f:setPropertyActionListener target="#{listadoContactosController.editContactMode}" value="false" />
							</a4j:commandLink>
						</p:column>
						
						<p:column filterBy="#{contacto.primerApellido}" sortBy="#{contacto.primerApellido}"
			                filterExpression="contains" style="width:100px">
							<f:facet name="header">
								<h:outputLabel value="Apellido" />
							</f:facet>
							<h:outputText value="#{contacto.primerApellido} #{contacto.segundoApellido}" />
						</p:column>
						
						<p:column sortBy="#{contacto.primerNombre}" filterBy="#{contacto.primerNombre}"
							filterExpression="contains" style="width:100px">
							<f:facet name="header">
								<h:outputLabel value="Nombre" />
							</f:facet>
							<h:outputText value="#{contacto.primerNombre} #{contacto.segundoNombre}" />
						</p:column>
						
						<p:column style="width:100px">
							<f:facet name="header">
								<h:outputLabel value="#{msg.etiqueta_telefono_convencional}" />
							</f:facet>
							<h:outputText value="#{contacto.telefonoConvencional}" />
						</p:column>
						
						<p:column style="width:100px">
							<f:facet name="header">
								<h:outputLabel value="#{msg.celular}" />
							</f:facet>
							<h:outputText value="#{contacto.telefonoCelular}" />
						</p:column>
						
						<p:column filterBy="#{contacto.mail}" filterMatchMode="contains" style="width:100px">
							<f:facet name="header">
								<h:outputLabel value="#{msg.e_mail}" />
							</f:facet>
							<h:outputText value="#{contacto.mail}" />
						</p:column>
						
						<p:column style="width:100px">
							<f:facet name="header">
								<h:outputLabel value="#{msg.etiqueta_referencia}" />
							</f:facet>
							<h:outputText value="#{contacto.referencia}" />
						</p:column>
					</p:dataTable>
					
				</h:panelGroup>
		</rich:panel>
		
		<rich:popupPanel header="Contacto" id="detailContact" domElementAttachment="form" autosized="true" onmaskclick="#{rich:component('detailContact')}.hide()">
			<f:facet name="controls">
				<h:outputLink value="#" onclick="#{rich:component('detailContact')}.hide(); return false;">
	                <h:graphicImage library="org.richfaces" name="close_act.gif" style="border:0px;"/>
	            </h:outputLink>
			</f:facet>
			<rich:panel>
			<h:panelGrid columns="2" id="editGrid" styleClass="espacioDetalle">
				<h:outputLabel value="#{msg.etiqueta_profesion} :" />
     			<h:outputText value="#{listadoContactosController.personaSelected.profesion}" />
     			
				<h:outputLabel value="#{msg.nombre} :" />
     			<h:outputText value="#{listadoContactosController.personaSelected.primerNombre.concat(' ').concat(listadoContactosController.personaSelected.segundoNombre)}" 
     				rendered="#{!listadoContactosController.editContactMode}"/>
     			<h:panelGrid columns="2" rendered="#{listadoContactosController.editContactMode}">
     				<sigecComp:textField value="#{listadoContactosController.personaSelected.primerNombre}" editMode="true" required="true" label="#{msg.nombre}"/>
     				<h:inputText value="#{listadoContactosController.personaSelected.segundoNombre}" />
     			</h:panelGrid>
     			
     			<h:outputLabel value="#{msg.apellidos} :" />
     			<h:outputText value="#{listadoContactosController.personaSelected.primerApellido.concat(' ').concat(listadoContactosController.personaSelected.segundoApellido)}" 
     				rendered="#{!listadoContactosController.editContactMode}"/>
     			<h:panelGrid columns="2" rendered="#{listadoContactosController.editContactMode}">
     				<sigecComp:textField value="#{listadoContactosController.personaSelected.primerApellido}" editMode="true" required="true" label="#{msg.apellidos}"/>
     				<sigecComp:textField value="#{listadoContactosController.personaSelected.segundoApellido}" editMode="true" required="false" label="#{msg.apellidos}"/>
     			</h:panelGrid>
     			
     			<h:outputLabel value="#{msg.cedula} :" />
     			<sigecComp:textField value="#{listadoContactosController.personaSelected.cedula}" editMode="#{listadoContactosController.editContactMode}" />
     			
     			<h:outputLabel value="#{msg.direccion} :" />
     			<sigecComp:textField value="#{listadoContactosController.personaSelected.direccion}" editMode="#{listadoContactosController.editContactMode}" />
     			
     			<h:outputLabel value="#{msg.e_mail} :" />
     			<sigecComp:textField value="#{listadoContactosController.personaSelected.mail}" editMode="#{listadoContactosController.editContactMode}"/>
     			
     			<h:outputLabel value="#{msg.etiqueta_telefono_convencional} :" />
     			<sigecComp:textField value="#{listadoContactosController.personaSelected.telefonoConvencional}" editMode="#{listadoContactosController.editContactMode}"/>
     			
     			<h:outputLabel value="#{msg.celular} :" />
     			<sigecComp:textField value="#{listadoContactosController.personaSelected.telefonoCelular}" editMode="#{listadoContactosController.editContactMode}"/>
     			
     			<h:outputLabel value="#{msg.etiqueta_referencia} :" />
     			<sigecComp:textField value="#{listadoContactosController.personaSelected.referencia}" editMode="#{listadoContactosController.editContactMode}"/>
			</h:panelGrid>
			</rich:panel>
			<h:panelGroup layout="block" style="width:100%" styleClass="rf-pp-hdr">
				
				<h:panelGrid columns="2" id="btnPopupSection" style="margin:auto;">
					<a4j:commandLink value="Editar" action="#{listadoContactosController.btnEditarContacto}" styleClass="buttonCss" 
						rendered="#{!listadoContactosController.editContactMode}" execute="@this" render="btnPopupSection editGrid"></a4j:commandLink>
					<a4j:commandLink value="Guardar" action="#{listadoContactosController.btnGuardarContacto}" execute="@this editGrid" render="btnPopupSection editGrid"
						rendered="#{listadoContactosController.editContactMode}"></a4j:commandLink>
					<a4j:commandLink value="Cancelar" action="#{listadoContactosController.btnCancelEditarContacto}" execute="@this" render="btnPopupSection editGrid" 
						rendered="#{listadoContactosController.editContactMode}" ></a4j:commandLink>
				</h:panelGrid>
			</h:panelGroup>
		</rich:popupPanel>
		
	</h:form>
</ui:composition>
